import React, { useEffect, useLayoutEffect, useState } from 'react';
//会阻塞浏览器渲染真实DOM，优先执行Effect链表中的callback（同步操作）
export default function DemoOne() {
  console.log('render');
  const [num, setNum] = useState(0);
  const handle = () => {
    setNum(0);
  };
  //对于useEffect来说：第一次真实DOM已经渲染，组件更新会重新渲染真实的DOM;所以频繁切换的时候,会出现样式/内容闪烁！
  /*
      useEffect(() => {
      if (num === 0) {
        setNum(10);
      }
    }, [num]);  
  */
  //对于useLayoutEffect来说：第一次真实DOM还未渲染,遇到callback中修改了状态,视图立即更新,创建出新的虚拟DOM，然后和上一次的虚拟DOM合并在一起渲染为真实DOM;也就是此类需求下,真实DOM只渲染一次
  useLayoutEffect(() => {
    if (num === 0) {
      setNum(10);
    }
  }, [num]);
  return (
    <>
      <div
        className='demo'
        style={{ backgroundColor: num === 0 ? 'red' : 'green' }}
      >
        <span>{num}</span>
        <button onClick={handle}>新增</button>
      </div>
    </>
  );
}
